<script setup lang="ts">
import { UserFilled, Lock, Position } from '@element-plus/icons-vue';
import { useLoginStore } from '@/stores'
import { storeToRefs } from 'pinia';
import router from '@/router';
const isClick = ref(0)
const { userLoginForm, ruleFormRef, rules, } = storeToRefs(useLoginStore())
const { submitForm, keyOn } = useLoginStore()

</script>

<template>
    <div class="user-login">
        <div style="">
            <img style="width: 250px;" src="@/assets/apiFox_logo.png" alt="">
        </div>
        <div class="user-login-card">
            <div style="align-content: center;margin-top: 50%">
                <div class="flex-base user-login-header">
                    <span
                        style="font-size:24px;font-weight: 540;font-family: PingFangSC-Semibold, sans-serif;">登录</span>
                </div>

                <!-- 表单信息 -->
                <div class="user-login-content">
                    <el-form ref="ruleFormRef" :model="userLoginForm" :rules="rules" style="max-width: 600px"
                        label-width="auto" class="demo-ruleForm">

                        <el-form-item prop="username">
                            <el-input v-model="userLoginForm.username" type="text" autocomplete="off"
                                placeholder="请输入用户名" size="large" status-icon>
                                <template #append>
                                    <el-button style="width: 50px;" :icon="UserFilled" />
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item prop="password">
                            <el-input v-model="userLoginForm.password" type="password" autocomplete="off"
                                placeholder="请输入密码" size="large" @keyup.enter="submitForm(ruleFormRef)">
                                <template #append>
                                    <el-button style="width: 50px;" :icon="Lock" />
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item class="user-login-options">
                            <el-text style="user-select: none;" @click="router.push('/login')">找回密码</el-text>
                            <el-text style="user-select: none;" @click="router.push('/register')">立即注册</el-text>
                        </el-form-item>

                        <el-form-item class="user-login-submit">
                            <el-button type="primary" @click="submitForm(ruleFormRef)" :icon="Position">
                                登陆
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

        </div>
    </div>
</template>

<style scoped>
.user-login {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to bottom right, #EAD6EE, #A0F1EA);
}

.user-login-card {
    width: 420px;
    height: 100%;
    /* border: 1px solid black;d */
    align-content: center;
    margin-left: 60px;
}

.user-login-header {
    width: 380px;
    height: 40px;
    margin: 20px 20px 0px 20px;
    /* border: 1px solid greenyellow; */
    align-items: center;
    display: flex;
    justify-content: left;
    font-size: 1.640625rem;
}

.user-login-content {
    width: 360px;
    height: 400px;
    margin: 10px 20px 20px 20px;
    /* border: 1px solid pink; */

}

.user-login-content :deep(.el-form-item) {
    margin-bottom: 18px;
}

.user-login-content :deep(.el-form-item__content) {
    width: 440px;
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
}

.user-login-content :deep(.el-icon) {
    font-size: 18px;
}

.user-login-options :deep(.el-form-item__content) {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.user-login-submit :deep(.el-button) {
    width: 100%;
}
</style>